<!-- 新增销售页面 -->
<template>
  <div class="virtualWarehouse">
    <!-- 客户虚拟仓卡片 -->
    <el-card class="searchCard" shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>搜索客户</span>
      </div>
      <el-form ref="searchForm" class="searchForm" :model="searchForm" label-width="100px" :inline="false" size="normal">
        <!-- 客户姓名搜索 -->
        <el-form-item label="客户姓名:">
          <el-input v-model="searchForm.customerNum" style="width:200px" placeholder="请输入客户编号" size="small" clearable />
          <div class="selectCustomer" style="float:right;width:36px;height:32px;background-color:#169BD5;text-align:center;border-radius:5px;margin-top:4.5px;user-select:none;cursor:pointer" @click="selectCustomer">...</div>
        </el-form-item>
        <!-- 客户手机号搜索 -->
        <el-form-item label="客户手机号:">
          <el-input v-model="searchForm.connectPhone" style="width:200px" placeholder="联系人手机" size="small" clearable />
        </el-form-item>
        <!-- 查询和重置按钮 -->
        <el-form-item class="searchBtn">
          <el-button type="primary" size="small">查询</el-button>
          <el-button type="default" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 选择商品卡片 -->
    <el-card class="supplierList" shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>选择商品</span>
      </div>
      <!-- 选择商品搜索表单 -->
      <el-form ref="form" label-width="120px" style="display:flex" :inline="false" size="normal">
        <!-- 商品名称搜索 -->
        <el-form-item label="商品名称:">
          <el-input size="mini" style="width:200px" placeholder="商品名称" clearable />
        </el-form-item>
        <!-- 活动区域选择 -->
        <el-form-item label="商品类型:">
          <el-select placeholder="请选择商品类型" size="mini">
            <el-option label="全部" value="shanghai" />
            <el-option label="服务" value="beijing" />
            <el-option label="实物" value="beijing" />
          </el-select>
        </el-form-item>
        <!-- 分类选择 -->
        <el-form-item label="分类:">
          <el-select placeholder="请选择分类" size="mini">
            <el-option label="检测服务" value="shanghai" />
            <el-option label="日常用品" value="beijing" />
          </el-select>
        </el-form-item>
        <!-- 关联商品编号 -->
        <el-form-item label="关联商品编号:">
          <el-input size="mini" style="width:200px" placeholder="关联商品编号" clearable />
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" size="mini">查询</el-button>
        </el-form-item>
      </el-form>

      <template>
        <!-- 商品列表 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="num"
            label="序号"
            width="200"
          />
          <el-table-column
            prop="customerNum"
            label="商品名称"
            width="200"
          />
          <el-table-column
            prop="attribute"
            label="商品类型"
          />
          <el-table-column
            prop="connectPhone"
            label="规格"
          />
          <el-table-column
            prop="companyName"
            label="指定供应方"
          />
          <el-table-column
            prop="date"
            label="十蜂关联商品编号"
          />
          <el-table-column
            label="操作"
            width="200"
          >
            <template>
              <el-button type="text" size="small" @click="checkGoods">查看</el-button>
              <el-button type="text" size="small" @click="selectGoods">选中</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <!-- 选择商品分页器 -->
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>

      <!-- 选中客户弹框 -->
      <el-dialog
        title="客户信息"
        center
        :visible.sync="isSelectCustomer"
        width="80%"
        style="margin-top:120px;"
        class="dialog"
      >
        <!-- 客户信息搜索表单 -->
        <el-form ref="form" label-width="120px" style="display:flex;flex-wrap:wrap;" :inline="false" size="normal">
          <!-- 客户类型选择 -->
          <el-form-item label="客户类型:">
            <el-select placeholder="请选择客户类型" size="mini">
              <el-option label="全部" value="shanghai" />
              <el-option label="服务" value="beijing" />
              <el-option label="实物" value="beijing" />
            </el-select>
          </el-form-item>
          <!-- 客户属性选择 -->
          <el-form-item label="客户属性:">
            <el-select placeholder="请选择客户属性" size="mini">
              <el-option label="检测服务" value="shanghai" />
              <el-option label="日常用品" value="beijing" />
            </el-select>
          </el-form-item>
          <!-- 联系人手机号 -->
          <el-form-item label="联系人手机号:">
            <el-input size="mini" style="width:200px" placeholder="联系人手机号" clearable />
          </el-form-item>
          <!-- 联系人姓名 -->
          <el-form-item label="联系人姓名:">
            <el-input size="mini" style="width:200px" placeholder="联系人姓名" clearable />
          </el-form-item>
          <!-- 公司名称 -->
          <el-form-item label="公司名称:">
            <el-input size="mini" style="width:200px" placeholder="公司名称" clearable />
          </el-form-item>
          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" size="mini">查询</el-button>
            <el-button type="default" size="mini" @click="addCustomer">新增客户</el-button>
          </el-form-item>
        </el-form>

        <!-- 进货明细列表 -->
        <el-card shadow="never" body-style="margin-top:20px;" class="messageList">
          <el-table
            :data="tableData"
            style="width: 100%"
            border
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column
              prop="messageNum"
              label="序号"
              width="100"
            />
            <el-table-column
              prop="messageType"
              label="客户类型"
              width="200"
            />
            <el-table-column
              prop="messageTime"
              label="客户属性"
            />
            <el-table-column
              prop="messageContant"
              label="联系人姓名"
              width="200"
            />
            <el-table-column
              prop="readState"
              label="联系人手机"
            />
            <el-table-column
              prop="remaks"
              label="公司名称"
            />
            <el-table-column
              label="操作"
              width="200"
            >
              <template>
                <el-button type="text" size="small" @click="checkCustomer">查看</el-button>
                <el-button type="text" size="small">选中</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <!-- 消息表格分页器 -->
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-dialog>

      <!-- 查看客户信息 -->
      <el-dialog
        title="查看客户"
        center
        :visible.sync="dialogVisible"
        width="20%"
        style="margin-top:120px;"
        class="dialog"
      >
        <div class="customerMessage">
          <!-- 弹框显示信息 -->
          <div>客户属性：{{ costomerMessage.attribute }}</div>
          <div>客户类型：{{ costomerMessage.customerType }}</div>
          <div>联系人姓名：{{ costomerMessage.connectName }}</div>
          <div>联系人手机：{{ costomerMessage.connectPhone }}</div>
          <div>公司名称：{{ costomerMessage.companyName }}</div>
          <div>公司地址：{{ costomerMessage.companyAddress }}</div>
          <div>营业执照：{{ costomerMessage.businessLicense }}</div>
          <div>身份证号：{{ costomerMessage.identityNum }}</div>
          <div>职业：{{ costomerMessage.profession }}</div>
          <div>备注：{{ costomerMessage.remark }}</div>
          <div>余额：{{ costomerMessage.balance }}</div>
        </div>
      </el-dialog>

      <!-- 新增客户弹框 -->
      <el-dialog
        title="新增客户"
        center
        :visible.sync="isAddCustomer"
        width="40%"
      >
        <!-- 新增客户表单内容 -->
        <div class="addCustomerCard">
          <!-- 选择客户属性部分 -->
          <div>
            <span style="margin-left:27px;font-size:14px;font-weight:700;">客户属性：</span>
            <el-button class="personal" :type="personalType" size="default" @click="personal">个人</el-button>
            <el-button class="company" :type="companyType" size="default" @click="company">企业</el-button>
          </div>
          <!-- 表单部分 -->
          <el-form ref="addCustomerForm" class="addCustomerForm" :model="addCustomerForm" label-width="100px" :inline="false" size="normal">
            <!-- 选择客户类型 -->
            <el-form-item label="客户类型:">
              <el-select v-model="addCustomerForm.type" style="width:400px" size="small" placeholder="请选择客户类型">
                <el-option label="销售渠道" value="1" />
                <el-option label="大客户" value="2" />
                <el-option label="散户" value="3" />
              </el-select>
            </el-form-item>
            <!-- 联系人姓名 -->
            <el-form-item label="联系人姓名:">
              <el-input v-model="addCustomerForm.name" style="width:400px" placeholder="请输入联系人姓名" size="small" clearable />
            </el-form-item>
            <!-- 联系人手机 -->
            <el-form-item label="联系人手机:">
              <el-input v-model="addCustomerForm.phone" style="width:400px" placeholder="请输入联系人手机号" size="small" clearable />
            </el-form-item>
            <!-- 联系人姓名 -->
            <el-form-item label="公司名称:">
              <el-input v-model="addCustomerForm.companyName" style="width:400px" placeholder="请输入公司名称" size="small" clearable />
            </el-form-item>
            <!-- 公司地址 -->
            <el-form-item label="公司地址:">
              <el-input v-model="addCustomerForm.companyAddress" style="width:400px" :rows="3" type="textarea" placeholder="50字以内" maxlength="50" size="small" show-word-limit />
            </el-form-item>
            <!-- 营业执照 -->
            <el-form-item label="营业执照:">
              <el-input v-model="addCustomerForm.businessLicense" style="width:400px" placeholder="请输入营业执照" size="small" clearable />
            </el-form-item>
            <!-- 身份证号 -->
            <el-form-item label="身份证号:">
              <el-input v-model="addCustomerForm.identityNum" style="width:400px" placeholder="请输入身份证号" size="small" clearable />
            </el-form-item>
            <!-- 客户职业 -->
            <el-form-item label="职业:">
              <el-input v-model="addCustomerForm.profession" style="width:400px" placeholder="请输入职业" size="small" clearable />
            </el-form-item>
            <!-- 备注 -->
            <el-form-item label="备注:">
              <el-input v-model="addCustomerForm.remark" style="width:400px" :rows="5" type="textarea" placeholder="50字以内" maxlength="50" size="small" show-word-limit />
            </el-form-item>
            <!-- 余额 -->
            <el-form-item label="余额:">
              <el-input v-model="addCustomerForm.balance" style="width:400px" placeholder="请输入余额" size="small" clearable />元
            </el-form-item>
            <!-- 提交和取消按钮 -->
            <el-form-item>
              <el-button type="primary" class="submit" size="default">提交</el-button>
              <el-button type="default" class="cancel" size="default">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

      </el-dialog>

      <!-- 查看商品弹框 -->
      <el-dialog
        title="查看商品"
        center
        :visible.sync="isCheckGoods"
        width="600px"
      >
        <!-- 查看商品内容 -->
      </el-dialog>

      <!-- 选中商品弹框 -->
      <el-dialog
        :visible.sync="isSelectGoods"
        width="600px"
      >
        <div>
          <!-- 商品名称规格 -->
          <div style="text-align:center">细胞面膜（10ml/片 X 10片/盒）</div>
          <!-- 商品库存 -->
          <div style="text-align:center;margin-top:10px;">库存:5盒3片</div>
          <!-- 表单部分 -->
          <el-form ref="form" :rules="rules" label-width="100px" :inline="false" size="normal">
            <!-- 售出单位 -->
            <el-form-item label="售出单位：">
              <el-radio-group>
                <el-radio label="片" />
                <el-radio label="盒" />
              </el-radio-group>
            </el-form-item>
            <!-- 单价 -->
            <el-form-item label="单价">
              <el-input-number :min="1" :max="10" label="单价" size="mini" />
              <span style="margin-left:10px;">元</span>
            </el-form-item>
            <!-- 数量 -->
            <el-form-item label="数量">
              <el-input-number :min="1" :max="10" label="单价" size="mini" />
              <span style="margin-left:100px;color:red;">小计：50元</span>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item style="margin-left:100px;">
              <el-button type="primary" @click="saleDetail">确认</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>

        </div>
        <!-- 选中商品内容 -->
      </el-dialog>

    </el-card>

    <!-- 销售明细弹框 -->
    <el-dialog
      title="销售明细"
      center
      :visible.sync="isSaleDetail"
      width="60%"
    >
      <!-- 销售明细卡片 -->
      <div>
        <!-- 销售明细表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="num"
            label="已选商品"
            width="100"
          />
          <el-table-column
            prop="customerNum"
            label="规格型号"
            width="200"
          />
          <el-table-column
            prop="attribute"
            label="库存"
          />
          <el-table-column
            prop="connectPhone"
            label="销售单价"
          />
          <el-table-column
            prop="companyName"
            label="销售数量"
          />
          <el-table-column
            prop="date"
            label="小计"
          />
          <el-table-column
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="saleDetailEdit">编辑</el-button>
              <el-button type="text" size="small" @click="resetPassword(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 销售明细分页器 -->
        <div class="block">
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 合计 -->
        <div>
          合计：<span style="color:red">1000</span><span>元</span>
        </div>
        <!-- 按钮 -->
        <div style="text-align:center">
          <el-button type="primary" size="default" @click="settlement">结算</el-button>
          <el-button type="default" style="margin-left:200px;margin-top:20px;" size="default">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 结算弹框 -->
    <el-dialog
      title="结算"
      center
      :visible.sync="isSettlement"
      width="60%"
    >
      <!-- 结算表单 -->
      <el-form ref="form" label-width="120px" style="display:flex;flex-direction: column;" :inline="false" size="normal">
        <!-- 客户以及开单时间 -->
        <div style="display:flex;justify-content: space-between;padding:10px 75px;">
          <span style="font-weight:bold">客户：张三  17312341234 </span>
          <span style="font-weight:bold">开单时间：2022-02-16</span>
        </div>
        <!-- 余额 -->
        <el-form-item label="余额:">
          0 元
        </el-form-item>
        <!-- 合计金额 -->
        <el-form-item label="合计金额:">
          <span style="color:red;margin-right:10px">10.6</span>元
        </el-form-item>
        <!-- 优惠价 -->
        <el-form-item label="优惠价:">
          <el-input size="mini" style="width:200px;margin-right:10px" placeholder="输入优惠后的价格" clearable />元
        </el-form-item>

        <!-- 结算方式选择 -->
        <el-form-item label="结算方式：">
          <el-radio-group>
            <el-radio label="现结" />
            <el-radio label="部分赊账" />
            <el-radio label="全部赊账" />
          </el-radio-group>
        </el-form-item>

        <!-- 收款方式选择 -->
        <el-form-item label="收款方式">
          <el-radio-group>
            <el-radio label="支付宝" />
            <el-radio label="微信" />
            <el-radio label="现金" />
            <el-radio label="对公银行" /> <el-input style="width:200px" placeholder="对公收账银行" size="mini" clearable />
          </el-radio-group>
        </el-form-item>

        <!-- 实收 -->
        <el-form-item label="实收：">
          <el-input placeholder="实际收款" style="width:200px;margin-right:10px" size="mini" clearable />元
          <span style="margin-left:100px;">赊账：<span style="color:red;">0.00</span> 元</span>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注">
          <el-input style="width:400px" placeholder="30字以内" maxlength="30" type="textarea" show-word-limit />
        </el-form-item>

        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" size="small">确认</el-button>
          <el-button type="default" size="small">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
export default {
// import引入的组件需要注入到对象中才能使用，
  components: {},
  data() {
    // 这里存放数据
    return {
      isSettlement: false, // 结算弹框
      isSaleDetail: false, // 销售明细弹框
      isSelectGoods: false, // 选中商品弹框
      isCheckGoods: false, // 查看商品弹框
      personalType: 'primary', // 个人按钮样式
      companyType: 'default', // 企业按钮样式
      addCustomerForm: { // 添加客户信息
        attribute: 0, // 客户属性
        type: '', // 客户类型
        name: '', // 联系人姓名
        phone: '', // 联系人手机号
        companyName: '', // 公司名称
        companyAddress: '', // 公司地址
        businessLicense: '', // 营业执照
        identityNum: '', // 身份证号
        profession: '', // 客户职业
        remark: '', // 备注
        balance: ''// 客户余额
      },
      isAddCustomer: false, // 新增客户按钮弹窗
      isSelectCustomer: false, // 选中客户弹窗
      dialogFormVisible: false, // 重置密码表单现实隐藏
      costomerMessage: {}, // 客户信息
      dialogVisible: false, // 查看客户信息
      searchForm: {
        state: '0', // 虚拟仓状态选择
        value1: [], // 查询日期
        companyName: '', // 供应商名字
        type: '4', // 客户类型
        attribute: '3', // 客户属性
        connectName: '', // 联系人姓名
        connectPhone: '', // 联系电话
        customerNum: ''// 客户编号
      },
      tableData: [{
        num: '01',
        customerNum: 'KH2110080001',
        customerType: '销售渠道',
        attribute: '企业',
        connectName: '张三',
        companyName: '微红健康',
        connectPhone: '17311111111',
        date: '2022-01-01',
        virtualWarehouse: '启用'
      }, {
        num: '02',
        customerNum: 'KH2110080001',
        customerType: '销售渠道',
        attribute: '企业',
        connectName: '张三',
        companyName: '微红健康',
        connectPhone: '17311111111',
        date: '2022-01-01',
        virtualWarehouse: '启用'

      }, {
        num: '03',
        customerNum: 'KH2110080001',
        customerType: '销售渠道',
        attribute: '企业',
        connectName: '张三',
        companyName: '微红健康',
        connectPhone: '17311111111',
        date: '2022-01-01',
        virtualWarehouse: '启用'
      }],
      currentPage4: 2 // 当前页数
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    settlement() { // 结算弹框
      this.isSettlement = true
    },
    saleDetailEdit() { // 销售明细编辑
      this.isSelectGoods = true
    },
    saleDetail() { // 销售明细
      this.isSaleDetail = true
      setTimeout(() => {
        this.isSelectGoods = false
      }, 500)
    },
    selectGoods() { // 选中商品
      this.isSelectGoods = true
    },
    checkGoods() { // 查看商品
      this.isCheckGoods = true
    },
    addCustomer() { // 添加客户
      this.isAddCustomer = true
    },
    personal() {
      // 点击客户属性个人按钮事件
      this.personalType = 'primary'
      this.companyType = 'default'
    },
    company() {
      // 点击客户属性企业按钮事件
      this.personalType = 'default'
      this.companyType = 'primary'
    },
    selectCustomer() { // 点击客户姓名输入框出现弹框
      this.isSelectCustomer = true
    },
    checkCustomer() { // 查看客户信息事件
      this.dialogVisible = true
    },
    handleSizeChange(val) { // 分页器事件每页条数
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 分页器事件当前页
      console.log(`当前页: ${val}`)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.virtualWarehouse{//虚拟仓样式
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f0f2f5;
    .searchCard{//搜索卡片样式
      margin: 30px;
      .searchForm{//搜索表单样式
         display: flex;
        flex-wrap: wrap;
      }
    }
    .supplierList{//供应商列表
      margin: 30px;
    }
    .block{//分页器样式

      margin-top: 20px;
        padding: 20px;
        display: flex;
        justify-content: center;
      }

      .customerMessage{//客户信息样式
          padding: 0px 10px;
        div{
          margin-bottom: 20px;
        }
    }

}
</style>
